<script setup>
import { ref } from "vue";
import { useUserStore } from "../../store/user";
import { imgUrl } from "../../utils/global";
import LoginPop from '../../components/login-pop';
import { computed } from "vue";

const userStore = useUserStore();
const loginPopRef = ref();

const orderList = ref([
  { name: "待付款", path: "" },
  { name: "待服务", path: "" },
  { name: "待收货", path: "" },
  { name: "待评价", path: "" },
  { name: "退款/售后", path: "" },
]);

const serviceList = ref([
  { name: "预约挂号", path: "",icon:"/static/img/icons/service1.png" },
  { name: "我的体检人", path: "/pages/profile/customer_list/index",icon:"/static/img/icons/service2.png" },
  { name: "出行服务", path: "/pages/travel/list",icon:"/uploads/20250821/2ff22cc69be04e71d7eda7863e00101d.png" },
]);

const requestLogin = () => {
  if (userStore.userInfo.id !== -1) return;
  loginPopRef.value.requestLogin();
}

const goPath = (url) => {
  uni.navigateTo({
    url: url
  });
}

const getAvatar = computed(() => {
  if(userStore.userInfo.avatar) {
    if(userStore.userInfo.avatar.includes('/upload')) return imgUrl(userStore.userInfo.avatar);
    return userStore.userInfo.avatar;
  } else {
    return imgUrl('/static/img/imgs/avatar_empty.png');
  }
});
</script>

<template>
  <view class="app-my">
    <view class="profile-wrapper">
      <view class="info-wrapper">
        <view class="info-left" @click="requestLogin">
          <image class="avatar" :src="getAvatar"
            mode="aspectFill"></image>

          <template v-if="userStore.userInfo.id !== -1">
            <text>{{ userStore.userInfo.nickname }}</text>
            <view class="level-wrapper">
              <image class="level-icon" :src="imgUrl('/static/img/icons/level.png')" mode="aspectFill"></image>
              <text>萌新</text>
            </view>
          </template>
          <template v-else>
            <text>点击登录</text>
          </template>
        </view>

        <image class="setting-icon" :src="imgUrl('/static/img/icons/setting.png')" mode="aspectFill"
          @click="goPath('/pages/profile/profile_edit/index')"></image>
      </view>

      <view class="profile-split"></view>

      <view class="entrance-wrapper">
        <view class="entrance-item" style="flex:1" @click="goPath('/pages/reserve/index/index?quick=0')">
          <view class="left-info">
            <text>我的体检</text>
            <view class="info-row">
              <text>查看详情</text>
              <uni-icons type="right" size="15" color="#6F2FD2"></uni-icons>
            </view>
          </view>
          <image :src="imgUrl('/static/img/icons/state.png')" mode="heightFix"></image>
        </view>

        <view class="entrance-item" style="display:none">
          <view class="left-info">
            <text>购物车</text>
            <view class="info-row">
              <text>查看详情</text>
              <uni-icons type="right" size="15" color="#F54730"></uni-icons>
            </view>
          </view>
          <image :src="imgUrl('/static/img/icons/cart.png')" mode="heightFix"></image>
        </view>
      </view>
    </view>

    <view class="order-wrapper" style="display:none">
      <view class="order-header">
        <text>我的订单</text>
        <view class="header-right">
          <text>全部</text>
          <uni-icons type="right" size="15" color="#929292"></uni-icons>
        </view>
      </view>

      <view class="order-content">
        <view class="order-item" v-for="(item, index) in orderList" :key="`order-item-${index}`">
          <image class="order-icon" :src="imgUrl(`/static/img/icons/order${index + 1}.png`)" mode="heightFix"></image>
          <text>{{ item.name }}</text>
        </view>
      </view>
    </view>

    <view class="service-wrapper">
      <view class="service-header">
        <text>我的健康服务</text>
      </view>

      <view class="service-content">
        <view class="service-item" v-for="(item, index) in serviceList" :key="`service-item-${index}`"
          @click="goPath(item.path)">
          <image class="service-icon" :src="imgUrl(item.icon)" mode="heightFix">
          </image>
          <text>{{ item.name }}</text>
        </view>
      </view>
    </view>

    <!-- <image class="logo" :src="imgUrl('/static/img/imgs/my-logo.png')" mode="aspectFill"></image> -->

    <!-- 登录弹窗 -->
    <LoginPop ref="loginPopRef" />
  </view>
</template>

<style src="./style.scss" scoped />
